<template>
	<div>

			<div class="flex-container row">
				<div :class="item.status==1?'flex-item flex-item-on':'flex-item'" v-for="(item,index) in data" :key="index">
						<div class="line line_name">{{ item.name }}</div>
						<div class="line line_status">
								<el-tag type="primary" v-if="item.status==1" effect="dark" round>用餐中</el-tag>
								<el-tag type="info" v-if="item.status==0" effect="dark" round>空闲中</el-tag>
						</div>
						<div class="line line_money">¥{{ item.money ?? 0 }}</div>
						<div class="line line_people">{{item.people ?? 0}} / {{item.max_num}}</div>
						<div class="line_bott">
							<a class="mx-1" href="javascript:;" @click="show=true">结账</a>&nbsp;&nbsp;&nbsp;
							<a class="mx-1" href="javascript:;" @click="show2=true">加菜</a>&nbsp;&nbsp;&nbsp;
							<a class="mx-1" href="javascript:;">点餐</a>
						</div>
				</div>
				<div v-if="data.length == 0" style="text-align: center;font-size: 25px;color:#ccc;width: 100%;line-height: 40vh;">
						请先添加区域和桌号
				</div>
			</div>

			<el-dialog v-model="show" title="手动结账" width="600" :before-close="handleClose">
					<div>
						<el-alert title="手动结账针对未在小程序付款的用户，选择现金结账、柜台支付宝付款等情况" type="warning" :closable="false"/>

						<el-form :model="form" label-width="auto" style="max-width: 600px;margin-top: 20px;">
							<el-form-item label="付款方式">
								<el-radio-group v-model="form.ps">
									<el-radio value="1">现金付款</el-radio>
									<el-radio value="2">支付宝扫码</el-radio>
									<el-radio value="3">微信扫码</el-radio>
									<el-radio value="20">其他</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="付款金额">
							   <el-input v-model="form.money" type="number"/>
							</el-form-item>
							<el-button type="primary" @click="onSubmit" size="large">确定结账</el-button>
						</el-form>
					</div>
			</el-dialog>

			<el-dialog v-model="show2" title="点餐/加菜" width="70vw" :before-close="handleClose">
					<div>
						<el-container>
							<el-aside width="250px">
								  	<h3>已点菜品</h3>
									<div>
									    合计：<text style="font-size: 22px;color:#ff0000">1500</text>元
									</div>
									<div class="caibox" v-for="(item2,index2) in cai" :key="index2">
										 <el-image src="http://127.0.0.1:8787/upload/myfile/202404/ZRn7HOtzMIhTouWd9wPbaQsrkDv0Lm4582.jpg" :fit="fit" class="caibox_img"></el-image>
										 <div class="cainame">{{ item2.title}}</div>
										 <div class="cainum">¥{{ item2.price }} × {{ item2.num }} </div>
									</div>
									<div v-if="cai.length == 0" class="caiempty">
										 请在右边选择菜品
									</div>
							</el-aside>
							<el-main style="background-color: #f5f5f5;">

								<div class="xuancai_left">
										<a :class="nav_dex==index?'nav_on':''" @click="getpro(item.cid,index)" href="javascript:;" v-for="(item,index) in pro_nav" :key="index">{{ item.name }}</a>
								</div>
								<div class="xuancai_right">
										<div class="xuancai" v-for="(item3,index3) in pro" :key="index3">
											  <el-image src="https://assets.mmoexp.com/images/202408/20240813085638128730.png" :fit="fit"></el-image>
											  <div style="padding:7px;padding-top: 2px">
												<h3>{{ item3.title}}</h3>
												<p style="color:#ff0000"><text style="font-size: 7px;">¥</text>{{ item3.price }}</p>
												<div class="addnum">
													<el-input-number v-model="item3.num" :min="1" style="width: 115px;"/>
												</div>
												<el-button type="primary" class="addbtn" @click="addcai(item3)">确 定</el-button>
											  </div>
										</div>
								</div>
							</el-main>
						</el-container>
					</div>
			</el-dialog>



	</div>
</template>
<script>
	import { defineAsyncComponent } from 'vue';
	const work = defineAsyncComponent(() => import('./work'));
	const widgets = defineAsyncComponent(() => import('./widgets'));

	export default {
		name: "dashboard",
		components: {
			work,
			widgets
		},
		data(){
			return {
				nav_dex:0,
				form:{},
				pageLoading: true,
				dashboard: '0',
				show:false,
				show2:false,
				data:[],
				cai:[],
				pro_nav:[],
				pro:[],
				screenWidth: 0

			}
		},
		created(){
			this.updateScreenWidth();
			window.addEventListener('resize', this.updateScreenWidth);
		},
		mounted(){
		    this.getdesk()
			this.getprocat()
			this.getpro()
		},
		methods: {
			updateScreenWidth() {
			   this.screenWidth = window.innerWidth;
			   console.log(this.screenWidth)
			},
			addcai(addpro=[]){

				var you = 0
				var youdex = -1
				for(var i=0;i<this.cai.length;i++){
					if(this.cai[i].gid == addpro.gid){
							you++
							youdex = i
							break;
					}
				}

				if(you > 0){
					this.cai[youdex].num = this.cai[youdex].num + parseInt(addpro.num);

				}else{
					this.cai.unshift(addpro)
				}
			},
			async getdesk(){
				var res = await this.$API.system.universal.list.get({'nopage':1},'/desk/desk_dashboard');
				if(res.code == 200){
					this.data = res.data

				}
			},
			async getprocat(){
				var res = await this.$API.system.universal.list.get({'nopage':1},'/goods/cat');
				if(res.code == 200){
					this.pro_nav = res.data
					this.pro_nav.unshift({'name':'全部','cid':0})
				}
			},
			async getpro(cid=0,dex=0){
				this.nav_dex = dex
				var res = await this.$API.system.universal.list.get({'nopage':1,'cid':cid},'/goods/goods');
				if(res.code == 200){
					this.pro = res.data
				}
			},
			async onSubmit(){
				var res = await this.$API.system.universal.handle.post(this.form,'/desk/jiesuan');
				if(res.code == 200){
					this.visible = false;
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.xuancai_right{
	.xuancai{
		width: 140px;
		height: 280px;
		float: left;
		margin-left: 10px;
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;

	}
	.addnum{
		padding-left: 6px;
		padding-right: 6px;
		margin-top: 8px;
	}
	.addbtn{
		width: 100%;
		margin-top: 10px
	}
}
.xuancai_left{
	width: 120px;
	float: left;
	height: 62vh;
	background-color: #fff;
	border-radius: 8px;
	a{
		display: block;
		width:100%;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-top: 10px;
		padding-left: 4px;
		padding-right: 4px;
	}
	a:hover{
		background-color: #99CCFF;
		color:#fff;
	}
	.nav_on{
		background-color: #99CCFF;
		color:#fff;
	}
}
.caiempty{
	color:#999;
	margin-top: 15px;
	text-align: center;

}
.flex-container {
    display: flex;
    flex-wrap: wrap; /* 允许项目换行 */
    width:100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .flex-item {
    width: 205px;
    height: 150px;
    margin: 5px;
    /* background-color: lightblue;   */
    text-align: center;
    color: #333;
	background-color: #ccc;
	position: relative;
	border-radius: 8px;
  }
  .flex-item-on{
	background-color: #5B8849;
	color:#fff
  }
  /* 使用不同的 flex-direction 值来改变项目的排列方向 */

  /* flex-direction: row (默认值) */
  .flex-container.row {
    flex-direction: row;
  }
  .line_name{
		font-size: 18px;
		font-weight: bold;
		margin-top: 15px;
  }
  .line_bott{
	position: absolute;
	left:15%;
	width: 70%;
	bottom: 0;
	height: 24px;
	display: flex;
	justify-content: space-between;

  }
  .flex-item-on .line_bott a{
	color: #fff;
  }
  .flex-item-on .line_people{
	color:#ccc
  }
  .line_status{
	margin-top: 8px;
  }
  .line_money{
	font-weight: bold;
	font-size: 16px;
	margin-top:8px;
	height: 15px;
  }
  .line_people{
	color:#777;
	margin-top: 8px;
  }
  .caibox{
	width:100%;
	float: left;
	border-bottom: 1px solid #eee;
	padding-top: 7px;
	padding-bottom: 7px;
  }
  .caibox_img{
	width:45px;
	height: 45px;
	border-radius: 5px;
	float: left;
	margin-right:5px;
  }
  .cainame{
	 width: 200px;
	 float: left;
	 font-weight: bold;
	 margin-bottom: 5px;
  }
  .cainum{
	 width:200px;
	 float: left;
  }

</style>
